Alternatives to Pagination on Product-Listing Pages產品列表頁分頁替代方案

在電商網站中，“無限載入”（Infinite Loading）和“顯示更多”按鈕（Show More）作為替代傳統分頁的方案，為載入產品提供更流暢的互動方式。然而，是否適用這些替代方案需根據產品數量來決定。

分頁介紹

傳統分頁：將商品列表分成多頁，使用者透過“下一頁”按鈕或頁面編號來檢視更多產品。這種分頁方式適合產品種類龐大的網站，如亞馬遜，使用者可以精確控制頁面，避免資訊過載。

替代方案：中小型電商網站可考慮使用“無限載入”或“顯示更多”按鈕，這些方式互動成本更低，適合小到中等規模的產品列表。

無限載入（Infinite Loading）

在“無限載入”設計中，使用者滾動頁面時會自動載入更多產品。適合以下場景：

• 產品數量較少（頁面內少於40個）

• 具備良好篩選功能以便使用者快速縮小範圍

• 清晰顯示總產品數（如“共42項”）

使用者體驗反饋：

在Christian Louboutin網站中，使用者滾動到底部時自動載入新商品，載入速度快時，使用者體驗較佳。使用者表示，只要載入迅速即可接受。

然而，不適合大規模產品的無限載入設計有兩點原因：

難以訪問頁尾導航：滾動載入會不斷推遠頁尾位置，使用者難以訪問頁尾中的重要資訊（如退貨政策）。使用者可能失去方向感：對於產品眾多的頁面，使用者可能難以判斷已瀏覽的進度，易感到迷失。

產品數量的影響：

無限載入適合產品數量較少的類別。比如Tory Burch網站僅用一個頁面展示所有產品，使用者可以輕鬆瀏覽整個產品列表。此外，為了讓使用者保持方向感，Ann Taylor網站透過固定數值顯示總商品數並增加進度條功能，以幫助使用者追蹤瀏覽位置。

顯示更多按鈕（Show More Buttons）

“顯示更多”按鈕作為替代傳統分頁的方式出現在一些電商網站中，比如Aritzia，按鈕位置固定，使用者點選載入新內容。

優點：

與無限載入相比，“顯示更多”按鈕避免了頁尾訪問障礙，因為使用者需要點選才能載入更多內容。

使用者控制：使用者決定是否載入新內容，適合移動端使用者避免不必要的資料載入。

設計改進建議：
若採用“顯示更多”按鈕設計，應確保：顯示產品總數、已載入的產品數量、剩餘產品數量

如Lululemon在移動端產品列表中顯示“已顯示40個，共333個”，幫助使用者瞭解當前瀏覽進度，載入完所有內容後按鈕消失。

記住使用者位置（Save the Shopper’s Spot）

無論是無限載入還是“顯示更多”按鈕設計，電商網站應支援“返回記住位置”（即“蹦跳”操作）功能：使用者從列表頁跳轉至產品詳情頁後返回，能夠回到原位置，避免重複滾動。Christian Louboutin網站在使用無限載入的同時支援記住使用者位置功能，尤其對移動端使用者友好。

結論：對於中小型電商網站，“無限載入”或“顯示更多”按鈕可幫助使用者更便捷地瀏覽產品。採用這些方案時應進行可用性測試，以排除頁尾訪問受限或“顯示更多”按鈕不易發現等問題。